<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<style>
			.item {	
				display: block;
				width: 90px;
				margin: 0px;
				padding: 0px;
				background-color: transparent;
				border: none;

			}

			.but {
				display: inline-block;
				width: 30px;
				/* height: 125px; */
				/* text-align: center; */

			}

			button {
				height: 25px;
				width: 30px;
				margin-top: 5px;
			}

			.left,
			.right {
				display: inline-block;
				border: 1px solid rebeccapurple;
				height: 125px;
				width: 90px;
			}

			.box {
				margin: 0px auto;
				width: 300px;
				height: 125px;
				display: flex;
				justify-items: center;
				align-items: center;

			}

			.left,
			.but,
			.right {
				margin: 5px;
			}
			
			.selected{
				background-color: cornflowerblue;
			}
			
		</style>

	</head>
	<body>
		<div class="box">
			<div class="left">
				<button class="item"> a </button>
				<button class="item"> b </button>
				<button class="item"> c </button>
				<button class="item"> d </button>
			</div>

			<div class="but">

				<button onclick="mvRight()"> >> </button>
				<button onclick="mvLeft()">
					<< </button>

			</div>

			<div class="right">
				<button class="item"> 1 </button>
				<button class="item"> 2 </button>
				<button class="item"> 3 </button>
				<button class="item"> 4 </button>
			</div>
		</div>
	</body>



</html>
<script>
	let obj_arr = document.getElementsByClassName("item");

	for (let i = 0; i < obj_arr.length; i++) {
		obj_arr[i].addEventListener("click", function(event) {
			let e = obj_arr[i]
			let flag = false;
			e.classList.forEach(e=>{
				if(e == 'selected'){
					flag  = true;
					return
				}
			})
			
			if (flag) {
				//二次点击是取消选中
				console.log("取消选中")
				e.classList.remove("selected")
			}else{
				e.classList.add("selected")
				console.log("选中")
			}
		})
	}
	
	function mvRight(){
		debugger
		let left_obj = document.getElementsByClassName("left")[0];
		let selectedObj = left_obj.querySelectorAll("option:checked");
		console.log("");
	}
	
	function mvLeft(){
		
	}
	
	
</script>
